<template>
  <div class='index-container'>
    <a-row :gutter="20">
      <a-col :span="6">
        <div class='whiteBg'>
          <div style="padding:20px 12px 24px 12px">
            <div><span class='square'></span>物联网引导</div>
            <ul class='guide_item'>
              <li class='fx_end' v-for="(item, index) in list.guideList" :key="index" @click="toTargetView(item.url)">
                <div style='padding:16px'>
                  <div class='fx fx-center'>
                    <img src="~@/assets/images/img/icon_14.png" alt="" style='width:35px;height:35px;' />
                    <div style='margin-left: 10px;'>
                      <p class='f-small'>{{item.sub_name}}</p>
                      <p class='f-big'>{{item.name}}</p>
                    </div>
                  </div>
                </div>
                <img :src="item.src" alt="" style='width:68px;height:68px;' />
              </li>
            </ul>
          </div>
        </div>
        <div class='whiteBg' style='margin-top: 16px;padding-bottom: 23px;'>
          <div style="padding:20px 12px 24px 12px">
            <div><span class='square'></span>运维引导</div>
            <ul class='guide_item'>
              <li class='fx_end' v-for="(item, index) in list.operationList" :key="index"
                @click="toTargetView(item.url)">
                <div style='padding:16px'>
                  <div class='fx fx-center'>
                    <img src="~@/assets/images/img/icon_14.png" alt="" style='width:35px;height:35px;' />
                    <div style='margin-left: 10px;'>
                      <p class='f-small'>{{item.sub_name}}</p>
                      <p class='f-big'>{{item.name}}</p>
                    </div>
                  </div>
                </div>
                <img :src="item.src" alt="" style='width:68px;height:68px;' />
              </li>
            </ul>
          </div>
        </div>
      </a-col>
      <a-col :span="18">
        <a-row :gutter="20">
          <a-col :span="12">
            <div class='whiteBg'>
              <div style="padding:20px 12px">
                <div class='fx_end'>
                  <div><span class='square'></span>设备统计</div>
                  <a href="javascript:void(0)" @click="toTargetView('/device/DashBoard')">详情</a>
                </div>
                <a-row :gutter="20" type="flex" style='margin-top:25px'>
                  <a-col :span="11" class='grayBg' v-for="(item, index) in list.deviceList" :key="index">
                    <div style="padding:16px 26px 0 18px;min-height:106px">
                      <div class='fx_end'>
                        <div>
                          <p style='color:#615851;font-size:14px'>{{item.name}}</p>
                          <p style='color:#272624;font-size:14px;font-weight: 600;margin-top:8px'>{{item.nub}}</p>
                        </div>
                        <img :src="item.src" alt="" style='width:68px;height:68px;margin-top:22px' />
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class='whiteBg'>
              <div style="padding:20px 12px">
                <div class='fx_end'>
                  <div><span class='square'></span>基础统计</div>
                  <a href="javascript:void(0)" @click="toTargetView('/operation/DashBoard')">详情</a>
                </div>
                <a-row :gutter="20" type="flex" style='margin-top:25px'>
                  <a-col :span="11" class='grayBg' v-for="(item, index) in list.foundationList" :key="index">
                    <div style="padding:16px 26px 0 18px">
                      <div class='fx_end'>
                        <div>
                          <p style='color:#615851;font-size:14px'>{{item.name}}</p>
                          <p style='color:#272624;font-size:14px;font-weight: 600;margin-top:8px'>{{item.nub}}%</p>
                        </div>
                        <pie :chartData="list.pieData" height="90px" width='90px' v-if='index == 0' />
                        <pie :chartData="list.pieData1" height="90px" width='90px' v-if='index == 1' />
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-col>
        </a-row>

        <a-row style='margin-top: 16px;height: 372px;' :gutter="20">
          <a-col :span="12">
            <div class='whiteBg' style='height: 100%;'>
              <div style="padding:20px 12px 0 12px">
                <div class='fx_end'>
                  <div><span class='square'></span>设备信息趋势图</div>
                  <a href="javascript:void(0)" @click="toTargetView('/device/DashBoard')">详情</a>
                </div>
                <SingleLine v-if='list.barDataSource.length' :chartData="list.barDataSource" height="320px"
                  :option="singleLineOption">
                </SingleLine>
                <a-empty v-else style='margin-top: 90px;' />
              </div>
            </div>


            <!-- <div class='gridBg'>
              <div style='padding:22px 15px'>
                <div><span class='square'></span>平台架构图</div>
                <div class='ft-E'>PLATFORM ARCHITECTURE DIAGRAM</div>
                <img src="~@/assets/images/img/icon_21.png"
                  style='width:690px;height:278px;margin:7px auto 0;display: block;' />
              </div> 
            </div>-->
          </a-col>
          <a-col :span="12">
            <div class='whiteBg' style='height: 100%;'>
              <div style="padding:20px 12px 0 12px">
                <div class='fx_end'>
                  <div><span class='square'></span>告警统计趋势图</div>
                  <a href="javascript:void(0)" @click="toTargetView('/alarm/DashBoard')">详情</a>
                </div>
                <SingleLine v-if="list.barDataSources.length>0" :chartData="list.barDataSources" height="320px"
                  :option="singleLineOptions"></SingleLine>
                <a-empty v-else style='margin-top: 90px;' />
              </div>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <div class='whiteBg' style='margin-top: 16px;'>
      <div style="padding:20px 12px">
        <div><span class='square'></span>设备接入推荐步骤</div>
        <a-row style='margin-top: 13px;' :gutter="50">
          <a-col :span="8" class='icon_right' v-for="(item, index) in list.setupList" :key="index"
            @click="toTargetView(item.url)">
            <div class='title fx_end'>
              <p style='font-weight: bold;'>{{item.name}}</p>
              <img :src="item.src" style='width:52px;height:52px;' />
            </div>
            <!-- <div></div> -->
            <div style='padding:12px 12px 26px 12px;border: 1px #E5E5E5 solid;height: 85px;'>
              {{item.text}}
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class='whiteBg' style='margin-top: 16px;'>
      <div style="padding:20px 12px">
        <div><span class='square'></span>运维管理推荐步骤</div>
        <a-row style='margin-top: 13px;' :gutter="50">
          <a-col :span="6" class='icon_right' v-for="(item, index) in list.setup1List" :key="index"
            @click="toTargetView(item.url)">
            <div class='title fx_end'>
              <p style='font-weight: bold;'>{{item.name}}</p>
              <img :src="item.src" style='width:34px;height:31px;margin-top: 10px;' />
            </div>
            <!-- <div></div> -->
            <div style='padding:12px 12px 26px 12px;border: 1px #E5E5E5 solid;height: 85px;'>
              {{item.text}}
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
  import { getData } from './chartdemo.data.ts';
  import Pie from '/@/components/chart/Pie.vue';
  import * as echarts from 'echarts';
  import SingleLine from '/@/components/chart/SingleLine.vue';
  import { getOriginDataInfo } from '../../../device/DashBoard.ts';
  import { getAlarmLogLineInfo } from '../../../alarm/DashBoard.ts';
  import { getIndexInfo } from '../api.ts';
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const loading = ref(true);
  let list = reactive({
    pieData: [],
    pieData1: [],
    guideList: [{
      sub_name: 'STEP1',
      name: '创建产品',
      src: new URL('../../../../assets/images/img/icon_01.png', import.meta.url).href,
      url: '/device/ProductInfo'
    }, {
      sub_name: 'STEP2',
      name: '创建设备',
      src: new URL('../../../../assets/images/img/icon_02.png', import.meta.url).href,
      url: '/device/DeviceInfo'
    }, {
      sub_name: 'STEP3',
      name: '规则引擎',
      src: new URL('../../../../assets/images/img/icon_03.png', import.meta.url).href,
      url: '/scene/SceneInfo'
    }],
    operationList: [{
      sub_name: 'STEP1',
      name: '设备接入配置',
      src: new URL('../../../../assets/images/img/icon_01.png', import.meta.url).href,
      url: '/operation/OperationAccess'
    }, {
      sub_name: 'STEP2',
      name: '日志排查',
      src: new URL('../../../../assets/images/img/icon_02.png', import.meta.url).href,
      url: '/monitor/log'
    }],
    deviceList: [{
      name: '产品数量',
      nub: 0,
      src: new URL('../../../../assets/images/img/icon_13.png', import.meta.url).href,
    }, {
      name: '设备数量',
      nub: 0,
      src: new URL('../../../../assets/images/img/icon_27.png', import.meta.url).href,
    }],
    foundationList: [{
      name: 'CPU使用率',
      nub: '16.01%'
    }, {
      name: 'JVM内存',
      nub: '34.35%'
    }],
    setupList: [{
      name: '创建产品',
      text: '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
      src: new URL('../../../../assets/images/img/icon_04.png', import.meta.url).href,
      url: '/device/ProductInfo'
    }, {
      name: '配置产品接入方式',
      text: '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
      src: new URL('../../../../assets/images/img/icon_05.png', import.meta.url).href,
      url: '/operation/OperationAccess'
    }, {
      name: '添加测试设备',
      text: '添加单个设备，用于验证产品模型是否配置正确。',
      src: new URL('../../../../assets/images/img/icon_06.png', import.meta.url).href,
      url: '/device/DeviceInfo'
    }],
    setup1List: [{
      name: '协议管理',
      text: '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
      src: new URL('../../../../assets/images/img/icon_07.png', import.meta.url).href,
      url: '/operation/OperationProtocol'
    }, {
      name: '网络组建',
      text: '根据不同的传输类型配置平台底层网络组件相关参数。',
      src: new URL('../../../../assets/images/img/icon_07.png', import.meta.url).href,
      url: '/operation/OperationNetwork'
    }, {
      name: '设备接入网管',
      text: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
      src: new URL('../../../../assets/images/img/icon_08.png', import.meta.url).href,
      url: '/operation/OperationAccess'
    }, {
      name: '日志管理',
      text: '监控系统日志，及时处理系统异常。',
      src: new URL('../../../../assets/images/img/icon_07.png', import.meta.url).href,
      url: '/monitor/log'
    }],
    barDataSource: [],
    barDataSources: []
  });
  const singleLineOption = {
    grid: { left: '5%', right: '5%', bottom: '12%' },
    lineStyle: {
      color: '#BAC9F0',
    },
    areaStyle: {
      borderColor: '#000000', // 设置边界线颜色
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#BAC9F0'  // 100% 处的颜色
        }, {
          offset: 1, color: 'rgba(186,201,240,0.3)' //   0% 处的颜色
        }],
        global: false // 缺省为 false
      },
    },

  };
  const listQuery = {
    endDateTime: '',
    selectType: '3',
    startDateTime: ''
  };
  const singleLineOptions = {
    grid: { left: '5%', right: '5%', bottom: '12%' },
    lineStyle: {
      color: '#BAC9F0',
    },
    areaStyle: {
      borderColor: '#000000', // 设置边界线颜色
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#BAC9F0'  // 100% 处的颜色
        }, {
          offset: 1, color: 'rgba(186,201,240,0.3)' //   0% 处的颜色
        }],
        global: false // 缺省为 false
      },
    },

  };


  //跳转
  function toTargetView(url) {
    console.log(url)
    router.push({ path: url })
  }

  function initInfo() {
    const pieData = [];
    const pieData1 = [];
    getIndexInfo(null).then((res) => {
      if (res.success) {
        list.deviceList[0].nub = res.result.productCount
        list.deviceList[1].nub = res.result.deviceCount
        list.foundationList[0].nub = res.result.cpuUsed
        list.foundationList[1].nub = res.result.jvmUsed
        pieData.push({ value: res.result.cpuUsed, name: 'CPU使用率', itemStyle: { color: '#D3ADF8' } },
          { value: Number(100 - res.result.cpuUsed), name: '', itemStyle: { color: '#EBEBEB' } })
        pieData1.push(
          { value: res.result.jvmUsed, name: 'JVM内存', itemStyle: { color: '#86A5FF' } },
          { value: Number(100 - res.result.jvmUsed), name: '', itemStyle: { color: '#D6E4FF' } }
        )
        list.pieData = pieData
        list.pieData1 = pieData1
      }
    });
  }
  function originDataInfo() {
    let barData = []
    getOriginDataInfo(listQuery).then((res) => {
      if (res.success) {
        if (res.result.length > 0) {
          for (let i = 0; i < res.result.length; i++) {
            let obj = { name: '', value: 0, seriesType: 'line' };
            obj.name = res.result[i].staticDate;
            obj.value = res.result[i].staticCount;
            barData.push(obj);
          }
          list.barDataSource = barData
        } else {
          list.barDataSource = []
        }
      }
    });
  }
  function alarmLogLineInfo() {
    let barDatas = []
    getAlarmLogLineInfo(listQuery).then((res) => {
      if (res.success) {
        if (res.result.length > 0) {
          for (let i = 0; i < res.result.length; i++) {
            let obj = { name: '', value: 0, seriesType: 'line' };
            obj.name = res.result[i].staticDate;
            obj.value = res.result[i].staticCount;
            barDatas.push(obj);
          }
          list.barDataSources = barDatas
        } else {
          list.barDataSources = []
        }
      }
    });
  }
  initInfo();
  originDataInfo();
  alarmLogLineInfo();
</script>
<style lang="less" scoped>
  .fx {
    display: flex;
    padding: 0;
  }

  .fx_end {
    display: flex;
    justify-content: space-between;
  }

  .fx-center {
    justify-content: center;
    align-items: center;
  }

  p {
    margin: 0;
    padding: 0
  }

  a {
    font-size: 14px;
    color: #243AA6;
  }

  .index-container {
    padding: 18px;

    .whiteBg {
      background: #fff;
    }

    .square {
      width: 8px;
      height: 8px;
      background: #243AA6;
      display: inline-block;
      margin-right: 14px;
    }

    .guide_item {
      margin-bottom: 0;

      li {
        width: 100%;
        height: 70px;
        border-left: 1px #243AA6 solid;
        border-top: 1px #E5E5E5 solid;
        border-right: 1px #E5E5E5 solid;
        border-bottom: 1px #E5E5E5 solid;
        margin-top: 12px;
        cursor: pointer;

      }

      .f-small {
        font-size: 12px;
        color: #565359;
      }

      .f-big {
        font-weight: 600;
        font-size: 16px;
        color: #292421;
      }
    }

    .grayBg {
      background: linear-gradient(146deg, #F6F7FC 0%, #FFFFFF 100%);
      box-shadow: 0px 2px 10px 0px rgba(85, 111, 176, 0.15);
      border-radius: 0px 0px 0px 0px;
      margin-left: 13px
    }

    .gridBg {
      background: #fff url(/@/assets/images/img/icon_35.png) no-repeat;
      width: 100%;
      height: 372px;
      background-size: cover;

      .ft-E {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: rgba(39, 38, 36, 0.2);
        margin-left: 24px;
      }
    }

    .title {
      height: 40px;
      line-height: 40px;
      background: #F8F9FD;
      padding: 0 20px 0 12px;
    }

    .icon_right {
      cursor: pointer;
    }

    .icon_right:after {
      position: absolute;
      top: 60%;
      right: -14px;
      width: 26px;
      height: 12px;
      transform: translateY(-50%);
      content: " ";
      background: url(/@/assets/images/img/icon_22.png) no-repeat 60%;
      background-size: cover;
    }

    .icon_right:last-child:after {
      display: none;
    }

  }
</style>
